<template>
    <el-container class="">
        <section class="outer">
            <el-header class="header" height>
                <div class="header_infor" ref="headerback">
                    <div class="siemens"></div>
                    <div class="headerTitle">IBMS管理平台</div>
                    <div class="header_right">
                        <div class="header_right_item3 disflex" @click="showNavlist = !showNavlist">
                            <el-avatar icon="el-icon-user-solid"></el-avatar>
                            <span>{{ userName }}</span>
                            <div class="group_ul" v-if="showNavlist">
                                <div class="group_ul_li">
                                    <div class="group_ul_li_item" @click="$router.push('/personalCenter')">
                                        个人中心
                                    </div>
                                    <div class="group_ul_li_item">帮助</div>
                                    <!-- <div class="group_ul_li_item" @click="$router.push('/demoZhongshan')">
                                        三维可视化
                                    </div> -->
                                    <!-- <div class="group_ul_li_item" @click="$router.push('/dataHomePage')">
                                        数据仪表盘
                                    </div> -->
                                    <!-- <div class="group_ul_li_item">
                                        <span>语音控制</span>
                                        <el-switch v-model="value1" active-text="开" inactive-text="关">
                                        </el-switch>
                                    </div> -->
                                </div>
                            </div>
                        </div>
                        <div class="header_right_item2 disflex" @click="gomessageCenter">
                            <img src="@/assets/images/news.png" alt="" />
                            <span>消息</span>
                        </div>
                        <div class="" @click="">
                            <!-- <img src="@/assets/images/news.png" alt="" /> -->
                            <!-- <span>语音控制:</span>
                            <el-switch class="switch" @change="switchChange" v-model="value1" active-value="1"
                                active-text="ON" inactive-value="0" inactive-text="OFF"> </el-switch> -->
                        </div>
                        <!-- <div class="right_todo" style="font-size: 20px;" @click="$router.push('/to_do_listpage')">
              <i class="el-icon-tickets"></i>
            </div> -->
                    </div>
                </div>
                <!-- 回到首页 -->
                <div class="go_index temporaryclass" @click="(elAsideIndex = true), $router.push('./iot_ibms_visualization')"></div>
            </el-header>

            <keep-alive>
                <el-container class="container">
                    <el-aside class="aside">
                        <!-- 用于遮蔽滚动条 -->
                        <el-menu default-active="100" @open="openmenu" @close="subclose" class="el-menu-vertical-demo"
                            :collapse="true" background-color="#007674">
                            <template v-for="(item,index1) in menus">
                                <el-menu-item :index="item.description" @click="goComponent(
                                        '/' + item.description,
                                        []
                                    )" v-if="!item.children" :key="item.id">
                                    <img class="" :src="menuIcon[index1]" alt="" />
                                    <!-- <i class="" style="display:inline-block;width:18px;height:18px;background:url('../assets/images/menu_icon/'+index1+'.png')"></i> -->
                                    <!-- <span slot="title">{{item.name}}</span> -->
                                    {{item.name}}

                                </el-menu-item>
                                <!-- 一级 -->
                                <el-submenu :index="index1.toString()" v-if="item.children" :key="index1" v-menu>
                                    <template slot="title">
                                        <div class="left_nav">
                                            <div class="left_nav_img">
                                                <img class="" :src="images[index1]" alt="" />
                                            </div>
                                            <span class="nav_li_name">{{ item.name }}</span>
                                            <span class="nav_li_jt"></span>
                                        </div>
                                    </template>
                                    <!-- 二级 -->
                                    <section v-for="(itemChildren, index2) in item.children" :key="index2">
                                        <el-submenu :index="index1.toString() + '-' + index2.toString()"
                                            v-if="itemChildren.children">
                                            <template slot="title">
                                                <div class="left_nav" v-menu>
                                                    <div class="nav_li_name_div">{{ itemChildren.name }}</div>
                                                </div>
                                            </template>
                                            <!-- 三级 -->
                                            <section v-for="(itemChildrenChildren,
                            index3) in itemChildren.children" :key="index3">
                                                <el-submenu :index="
                                index1.toString() +
                                '-' +
                                index2.toString() +
                                '-' +
                                index3.toString()
                            " v-if="itemChildrenChildren.children">
                                                    <template slot="title">
                                                        <div class="left_nav">
                                                            <div class="nav_li_name_div">
                                                                {{ itemChildrenChildren.name }}
                                                            </div>
                                                        </div>
                                                    </template>
                                                    <el-menu-item-group>
                                                        <el-menu-item @click="
                                    (showForm = true),
                                    goComponent(
                                        '/' + children4.description,
                                        children4.resources
                                    )
                                " :index="
                                    index1.toString() +
                                    '-' +
                                    index2.toString() +
                                    '-' +
                                    index3.toString() +
                                    '-' +
                                    index4.toString()
                                " v-for="(children4,
                                index4) in itemChildrenChildren.children" :key="index4">{{ children4.name }}
                                                        </el-menu-item>
                                                    </el-menu-item-group>
                                                </el-submenu>
                                                <!-- 四级 -->
                                                <el-menu-item-group v-else>
                                                    <el-menu-item :index="
                                index1.toString() +
                                    '-' +
                                    index2.toString() +
                                    '-' +
                                    index3.toString()
                                " @click="
                                (showForm = true),
                                    goComponent(
                                    '/' + itemChildrenChildren.description,
                                    itemChildrenChildren.resources
                                    )
                                ">
                                                        {{ itemChildrenChildren.name }}</el-menu-item>
                                                </el-menu-item-group>
                                            </section>

                                        </el-submenu>
                                        <el-menu-item-group v-else>
                                            <el-menu-item :index="index1.toString() + '-' + index2.toString()" @click="
                                                (showForm = true),
                                                    goComponent(
                                                    '/' + itemChildren.description,
                                                    itemChildren.resources
                                                    )
                                                ">
                                                {{ itemChildren.name }}</el-menu-item>
                                        </el-menu-item-group>
                                    </section>
                                </el-submenu>
                            </template>
                        </el-menu>
                    </el-aside>
                    <!-- 内容展示 -->
                    <el-main class="contant">
                        <!-- 内容 -->
                        <router-view class="contant_view"></router-view>
                    </el-main>
                </el-container>
            </keep-alive>
            <el-dialog
            title="提示"
            :visible.sync="msgDialogVisible"
            width="30%"
            :before-close="handleClose">
            <span>语音控制socket弹窗</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="msgDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="msgDialogVisible = false">确 定</el-button>
            </span>
            </el-dialog>
        </section>
    </el-container>
</template>

<script>
    const { log } = console;
    // import indexMod from './indexMod.vue'
    export default {
        data() {
            return {
                msgDialogVisible:false,
                value1: false,
                userName: sessionStorage.getItem('name') || '管理员',
                infor: {},
                menus: [],
                inforList2: {
                    type: 1,
                    message: 'asdjajsdlsajdklasjdk',
                },
                elAsideIndex: true,
                showGroup: false, //显示集团内容
                showNavlist: false, //右上角列表
                groupOptions: [],
                showForm: false,
                phone: localStorage.getItem('phone'),
                images: [
                    require('../assets/images/menuicon1.png'),
                    require('../assets/images/menuicon8.png'),
                    require('../assets/images/menuicon2.png'),
                    require('../assets/images/menuicon4.png'),
                    require('../assets/images/menuicon5.png'),
                    require('../assets/images/menuicon6.png'),
                    require('../assets/images/menuicon7.png'),
                    require('../assets/images/menuicon2.png'),
                    require('../assets/images/menuicon9.png'),
                ],
                menuIcon: [
                    require('../assets/images/menu_icon/0.png'),
                    require('../assets/images/menu_icon/1.png'),
                    require('../assets/images/menu_icon/2.png'),
                    require('../assets/images/menu_icon/3.png'),
                    require('../assets/images/menu_icon/4.png'),
                    require('../assets/images/menu_icon/13.png'),
                    require('../assets/images/menu_icon/6.png'),//
                    require('../assets/images/menu_icon/7.png'),
                    require('../assets/images/menu_icon/8.png'),
                    require('../assets/images/menu_icon/9.png'),//
                    require('../assets/images/menu_icon/10.png'),
                    require('../assets/images/menu_icon/11.png'),
                    require('../assets/images/menu_icon/12.png'),
                    require('../assets/images/menu_icon/13.png'),
                    require('../assets/images/menu_icon/14.png'),
                    require('../assets/images/menu_icon/15.png'),
                    require('../assets/images/menu_icon/16.png'),
                    require('../assets/images/menu_icon/17.png'),
                    require('../assets/images/menu_icon/18.png'),
                ],
                backgroundb: [
                    // require('../assets/img/index/fanzaijiayuanht_3.png'),//四川绵阳
                    // require('../assets/img/index/fanzaijiayuanht_5.png'),//金深幼儿园
                    // require('../assets/img/index/fanzaijiayuanht_1.png'),//泛在
                ],
                background1: '',
                // path: "ws://192.168.0.118:8081/api/v1.0/alarmevents/userTuisong",
                // path: "ws://192.168.0.100:8081/api/v1.0/websocket/index/" + sessionStorage.getItem('Authorization'),
                // path:'ws://192.168.0.245:8400/websocket/global/' + sessionStorage.getItem('Authorization'),
                path: 'ws://192.168.0.245:8400/websocket/global/' + sessionStorage.getItem('Authorization'),//报警等socket连接
                path1: '',//'ws://192.168.0.245:8400/websocket/invoice/' + this.ip 语音socket连接
                socket: '',
                socket1: '',
                ip: '',
                voicemessage: '',
            };
        },
        methods: {
            handleClose(){
                this.msgDialogVisible = false;
            },
            open1: function () {
                console.log("socket连接成功")
                this.$message("语音控制连接成功!")
            },
            error1: function () {
                console.log("连接错误")
                this.$message("语音控制连接失败!")
                //连接失败按钮为false
                this.value1 = false
            },
            getMessage1: function (msg) {
                console.log(msg.data, "语音socket推送的数据信息")
                if (msg.data != "pong")
                    this.voicemessage = JSON.parse(msg.data);
                //  debugger
                if (this.voicemessage.messageAction == "JUMP") {
                    this.voicemessage.body = JSON.parse(this.voicemessage.body)
                    if (this.voicemessage.body) {
                        // console.log();
                        this.$router.push({
                            path: this.voicemessage.body.path,
                            query:{
                                invoiceresource: this.voicemessage.body.resource
                            }
                        })
                    }
                }
                // if (this.inforList2) {
                //     this.openMessege();
                // }
            },
            send1: function () {
                // let params = 'liyu';
                // this.socket.send(params);
            },
            close1: function () {
                debugger
                console.log("socket已经关闭")
            },
            handleGroup1(value) {
                //console.log(value);
            },
            switchChange(val) {
                if (val == true) {
                    if (typeof WebSocket === 'undefined') {
                        alert('您的浏览器不支持socket,请联系开发人员！');
                        this.value1 = false
                    } else {
                        // 实例化socket
                        this.socket1 = new WebSocket(this.path1);
                        console.log(this.socket1, "测试socket连接");
                        // 监听socket连接
                        this.socket1.onopen = this.open1;
                        // 监听socket错误信息
                        this.socket1.onerror = this.error1;
                        // 监听socket消息
                        this.socket1.onmessage = this.getMessage1;
                    }
                } else {
                    // debugger
                    this.socket1.close()
                    this.socket1.onclose = function (event) {
                        // code是服务器返回的数值状态码
                        // wasClean是一个布尔值，表示连接是否已经明确的关闭
                        // reason是一个字符串，包含服务器发回的信息
                        // debugger
                        let code = event.code;
                        console.log(this.socket1, code, "关闭socket连接");
                    }
                    console.log(this.socket1, "测试socket连接");
                }

            },
            gomessageCenter() {
                this.$message('该模块正努力在开发中哦！敬请期待😊！');
            },
            openmenu() {
                let element = document.querySelector('.el-menu--popup');
                // console.log('哈哈啊哈哈哈哈');
                // debugger;
                element.style.minWidth = '150px';
            },
            subclose() {
                console.log('hahahah');
            },

            init: function () {
                if (typeof WebSocket === 'undefined') {
                    alert('您的浏览器不支持socket');
                } else {
                    // 实例化socket
                    this.socket = new WebSocket(this.path);
                    // if(){

                    // }
                    // 监听socket连接
                    this.socket.onopen = this.open;
                    // 监听socket错误信息
                    this.socket.onerror = this.error;
                    // 监听socket消息
                    this.socket.onmessage = this.getMessage;
                }
            },
            open: function () {
                console.log("socket连接成功")
                // this.$message("语音控制连接成功!")
            },
            error: function () {
                console.log("连接错误")
                // this.$message("语音控制连接失败!")
            },
            getMessage: function (msg) {
                console.log(msg.data, "socket推送数据信息")
                this.inforList2 = msg.data;//JSON.parse();
                if (this.inforList2) {
                    this.openMessege();
                }
            },
            send: function () {
                let params = 'liyu';
                this.socket.send(params);
            },
            close: function () {
                console.log("socket已经关闭")
            },
            handleGroup(value) {
                //console.log(value);
            },
            goComponent(description, resources) {
                //菜单跳转
                // let resourcess = ['view','add','delete','edit']
                let resourcess = [];
                //console.log(resources)
                resources.forEach((item) => {
                    if (item.useAble) {
                        resourcess.push(item.code);
                    }
                });
                this.$root.btnControl = resourcess || ['btn'];
                //console.log(this.$root.btnControl)
                sessionStorage.setItem('btn', JSON.stringify(resourcess));
                this.elAsideIndex = false;
                //console.log(this.elAsideIndex)
                // debugger
                //  || description =="/iot_vscs"
                // if (
                //     description == '/messageCenter' ||
                //     description == '/iot_ba_lls' ||
                //     description == '/iot_afas' ||
                //     description == '/iot_acs' ||
                //     description == '/iot_cps' ||
                //     description == '/iot_irs' ||
                //     description == '/iot_nms'
                // ) {
                //     let arr = [
                //         'iot_pms',
                //         '/iot_iics',
                //         '/iot_ems',
                //         '/iot_ibms_visualization',
                //         '/iot_ba_hvac',
                //         '/iot_ba_es',
                //         '/iot_ba_ecs',
                //         '/service_eoms',
                //     ];
                //     this.$router.push(arr[(Math.random() * 10).toFixed(0)]);
                //     // this.$message('该模块正努力在开发中哦！敬请期待😊！');
                //     return;
                // } else {
                this.$router.push(description);
                console.log(this.$router, "路由！");
                // }
            },
            goComponent1() {
                //console.log("点击了详情按钮")
                this.$router.push('/' + this.inforList2.path);
            },
            openMessege() {
                const h = this.$createElement;
                // let html = '<div style="width:250px;">' +
                //     '<div style="display:flex;align-items: center;justify-content: space-between;">' +
                //     '<span>' + this.inforList2.type == 1 ? '设备报警' : this.inforList2.type == 2 ? '投诉建议': this.inforList2.type == 3 ? '在线申请' : '报修保养' + '</span>' +
                //     '<span>：' + this.inforList2.message + '</span>' +
                //     ' </div>' +
                //     '<div style="margin-top:10px;display:flex;align-items: center;">' +
                //     '  <button size="small " style="border:0px;padding: 2px 8px;background: #1271b4;color: #fff;">查看详情</button>' +
                //     '</div>' +
                //     ' </div>'
                this.$notify({
                    title: '信息提醒',
                    dangerouslyUseHTMLString: true,
                    duration: 0,
                    position: 'bottom-right',
                    message: h('div', { class: 'notifyTitle' }, [
                        h('div', { class: 'notifyContent' }, [
                            h(
                                'span',
                                { class: 'ss' },
                                this.inforList2.type == 1
                                    ? '设备报警'
                                    : this.inforList2.type == 2
                                        ? '投诉建议'
                                        : this.inforList2.type == 3
                                            ? '在线申请'
                                            : '测试连接'
                            ),
                            h('span', { class: 'ss' }, this.inforList2.message),
                        ]),
                        h('div', { class: 'notifyBtnList' }, [
                            h(
                                'button',
                                {
                                    class: 'notifyBtn',
                                    on: {
                                        '!click': this.goComponent1,
                                    },
                                },
                                '查看详情'
                            ),
                        ]),
                    ]),
                });
            },
            // 获取本地ip

        },
        mounted() {
            this.init();
            let backgroundImg = sessionStorage.getItem('backgroundImg');
            this.background1 = backgroundImg;
            this.menus = JSON.parse(sessionStorage.getItem('menus'));
            //获取本地ip
            this.ip = window.location.host.split(":")[0];
            console.log("ip获取本地ip", this.ip)
            this.path1 = 'ws://192.168.0.177:8400/websocket/invoice/' + this.ip;
            // if(this.phone == 18888888888){
            //   this.background1 = this.backgroundb[0]
            // }else if(userId=='0029'){
            //   this.background1 = this.backgroundb[1]
            // }else{
            //   this.background1 = this.backgroundb[2]
            // }
            // console.log(this.phone)
            //console.log(this.menus)
        },
        directives: {
            menu: {
                inserted(el, binding) {
                    let ul = el.lastChild.lastChild;
                    if (ul.childNodes.length > 10) {
                        let s = ul.style;
                        s.height = 'calc(100vh - 276px)';
                        s.overflowY = 'scroll';
                        s.scrollTop = 'hidden';
                        s.position = 'unset';
                    }
                },
            },
        },
    };
</script>

<style scoped lang='scss'>
    @import '../assets/css/index.css';

    .switch>>>.el-switch__label {
        color: #fff;
    }

    .switch>>>.is-active {
        color: #409EFF;
    }

    .outer /deep/.el-header {
        height: 100px !important;
    }

    .aside {
        background-color: #007674;
        height: 100%;
        width: 160px !important;
    }

    .el-menu-vertical-demo {
        color: red !important;

        & /deep/ .el-menu-item {
            text-align: left;
            padding-left: 18px !important;
        }
    }

    .hiddenScroll::-webkit-scrollbar {
        display: none;
        width: 0;
    }

    .container {
        overflow: hidden;
    }

    .nav_li_name_div {
        font-size: 14px;
        color: #ceffff;
        width: 150px;
        cursor: pointer;
        -webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
        transition: border-color 0.3s, background-color 0.3s, color 0.3s;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: 0px !important;
        text-align: center;
    }

    .notifyTitle {
        width: 250px;
    }

    .notifyContent {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .notifyBtnList {
        margin-top: 10px;
        display: flex;
        align-items: center;
    }

    .notifyBtn {
        border: 0px;
        padding: 2px 8px;
        background: #1271b4;
        color: #fff;
    }

    .right_todo {
        cursor: pointer;
    }

    .right_todo:hover {
        background: #909399;
    }

    .siemens {
        /* background: url('../assets/img/SIEMENS.png') no-repeat;
        background-size: 100%; */
        width: 145px;
        height: auto;
        margin-top: 11px;
        margin-left: 7.5px;
    }
    .headerTitle {
        font-weight: 800;
        position: absolute;
        left: 44%;
        top: 30px;
        letter-spacing: 6px;
        font-size: 28px;
        color: #fff;
}
</style>
<style>
    .el-menu--vertical .el-menu::-webkit-scrollbar {
        width: 5px;
    }

    .el-menu--vertical .el-menu::-webkit-scrollbar-thumb {
        background-color: #03b4b1;
        border-radius: 45px;
    }
    .temporaryclass{
        font-size: 26px;
        line-height: 101px;
        font-weight: 600;
        text-align: center;
        letter-spacing:10px
    }
</style>